<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">班主任续读（初三）</div>
        </div>
        <div class="widget-body  am-fr">
          <multiple-toolbar
            ref="toolbar"
            class="toolbar"
            @search="handleFind"
            :needInitSearch="false"
            synchronize
            @synchronize="handleSynchronize"
            areaTeam
            period
            teacherName
            campusName
            teacherNamePlaceholder="班主任名称"
          ></multiple-toolbar>
          <div class="am-u-sm-12 am-form-group">
            <el-button
              size="small"
              type="success"
              @click="handleExport"
            >
              <span class="am-icon-download"></span>&nbsp;&nbsp;导出</el-button>
            <el-button
              size="small"
              type="success"
              @click="goSettingFilter"
              v-if="hasPermission('reportSetting')"
            >设置</el-button>
          </div>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              maxHeight="600"
              empty-text="暂无数据"
              stripe
              style="min-width: 100%"
            >
              <el-table-column
                prop="campusName"
                min-width="150"
                label="校区"
              >
              </el-table-column>
              <el-table-column
                prop="periodName"
                min-width="120"
                label="期数"
              >
              </el-table-column>
              <el-table-column
                prop="seniorName"
                min-width="120"
                label="班主任"
              >
              </el-table-column>
              <el-table-column
                prop="nowPersonNum"
                min-width="120"
                label="本期人数"
              >
              </el-table-column>
              <el-table-column
                prop="seqPersonNum"
                min-width="120"
                label="顺期人数"
              >
              </el-table-column>
              <el-table-column
                prop="stepPersonNum"
                min-width="120"
                label="跨期人数"
              >
              </el-table-column>
              <el-table-column
                prop="nowBranchNum"
                min-width="120"
                label="本期科数"
              >
              </el-table-column>
              <el-table-column
                prop="seqBranchNum"
                min-width="120"
                label="顺期科数"
              >
              </el-table-column>
              <el-table-column
                prop="seqRate"
                min-width="120"
                label="顺期续读率"
              >
              </el-table-column>
              <el-table-column
                prop="stepBranchNum"
                min-width="120"
                label="跨期科数"
              >
              </el-table-column>
              <el-table-column
                prop="stepRate"
                min-width="120"
                label="跨期续读率"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="am-u-lg-12 am-cf">
          <div class="am-fr">
            <pagination
              :isShowTotal="false"
              v-bind:total="total"
              v-bind:pageNo="pageNo"
              v-bind:pageSize="pageSize"
              @paging="handlePage"
            />
          </div>
        </div>
      </div>
    </div>
    <countFilterModal
      ref="filterModal"
      :resourceId="6"
    ></countFilterModal>
  </div>
</template>
<script>
import io from '../../lib/io'
import MultipleToolbar from './MultipleToolbar.vue'
import Pagination from '../base/Pagination.vue'
import moment from 'moment'
import countFilterModal from '../potentialcustomer/countFilterModal.vue'

export default {
  data: function() {
    return {
      total: 0,
      pageSize: 10,
      pageNo: 1,
      tableData: [],
      allData: []
    }
  },
  components: {
    MultipleToolbar,
    Pagination,
    countFilterModal
  },
  watch: {},
  computed: {},
  mounted: function() {
    $(window).smoothScroll()
    //      this.loadTableData()
  },
  methods: {
    goSettingFilter() {
      this.$refs.filterModal.show()
    },
    handleSynchronize() {
      let toolbar = this.$refs.toolbar
      let periodIds = [],
        periodName = ''
      if (toolbar.formData.periodIds.length === 0) {
        this.$alert('同步数据需要选择一个期数')
        return
      } else if (toolbar.formData.periodIds.length === 1) {
        periodIds = toolbar.formData.periodIds
        toolbar.periods.map(val => {
          if (val.periodId === periodIds[0]) {
            periodName = val.periodName
          }
        })
      } else {
        this.$alert('同步数据只能选择一个期数')
        return
      }
      io.post(io.findZyExternalReg, { periodIds: periodIds[0] }, ret => {
        if (ret.success) {
        } else {
          this.$alert(ret.desc)
        }
      })
    },
    handleFind() {
      this.loadTableData(1)
    },
    handlePage(pageNo) {
      this.pageNo = pageNo || this.pageNo || 1
      this.tableData = this.allData.slice(
        (this.pageNo - 1) * this.pageSize,
        this.pageSize * this.pageNo
      )
    },
    handleExport() {
      var _this = this

      io.downloadFile(io.exportExternalSeniorReg, this.formatData(), function(
        ret
      ) {
        if (ret.success) {
        } else {
          _this.$alert(ret.desc)
        }
      })
    },
    loadTableData: function(pageNo) {
      var _this = this
      _this.pageNo = pageNo || _this.pageNo || 1

      this.$showLoading()
      io.post(
        io.findExternalSeniorReg,
        Object.assign(
          {},
          {
            pageNo: _this.pageNo,
            pageSize: _this.pageSize
          },
          this.formatData()
        ),
        function(ret) {
          _this.$hiddenLoading()
          if (ret.success) {
            _this.total = ret.data.length
            _this.allData = ret.data
            _this.handlePage()
          } else {
            _this.$alert(ret.desc)
          }
        }
      )
    },
    formatData() {
      let toolbar = this.$refs.toolbar
      let periodIds = []

      if (toolbar.formData.periodIds.length === 0) {
        toolbar.periods.map(val => {
          periodIds.push(val.periodId)
        })
      } else {
        periodIds = toolbar.formData.periodIds
      }
      return {
        areaTeamId: toolbar.formData.areaTeamId,
        seniorName: toolbar.formData.teacherName,
        campusName: toolbar.formData.campusName,
        periodIds: periodIds.join(',')
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
